<#include "../public/import.html"/>
<link href="${basePath}pages/css/article.css" type="text/css" rel="stylesheet" />
<link href="${basePath}ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet" />
<!-- 加载自定义的ueditor配置文件mgconfig.js -->
<script type="text/javascript" src="${basePath}ueditor/mgconfig.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="${basePath}ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${basePath}ueditor/ueditor.all.js"></script>
<!-- 加入中文文件 -->
<script type="text/javascript" charset="utf-8" src="${basePath}ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- 加入自定义的工具 -->
<script type="text/javascript" charset="utf-8" src="${basePath}ueditor/mg.ueditor.tool.js"></script>
<#include "../public/nav.html"/>
<div id="mgbody-border" class="container">
	<div class="article">
		<div class="blogTitle">写博客</div>
		<form class="form-horizontal" role="form" id="addBlogForm" 
			action="article_addArticle.do" method="post" onsubmit="return validateForm();">
			<div class="form-group">
				<div class="article_line">文章标题:</div>
				<div class="col-sm-6">
					<input type="text" class="form-control" name="title" id="inputTitle"
						placeholder="请输入文章标题">
				</div>
			</div>
			<!-- 加载编辑器的容器 -->
			<script id="container" name="content" style="height: 400px;"
				type="text/plain">
					这里写你的初始化内容
    			</script>
			<!-- 实例化编辑器 -->
			<script type="text/javascript">
				var ue = UE.getEditor('container', {
					toolbars : [mgtool]/*这里使用的是mgconfig.js中自定义的toolbars变量mgtool
										因为toolbars需要的是一个二维数组，所以使用 [mgtool]来赋值，
										这也是在mgconfig.js中将mgtool定义为一维数组的用意。（直接
										定义二维数组，toolbars:mgtool 是出不来效果的。）
										*/
				});
				//要使用mg.ueditor.tool.js工具的话，一定不要忘记设置ueId,默认是editor
				setUeId("container");
			</script>
			<div class="pb10"></div>
			<div class="form-group">
				<div class="article_line">文章分类：</div>
				<div class="col-sm-6">
					<select name="sortId" class="sortSelect" id="inputSort">
						<option id="pleaseSort" value="0">--请选择分类--</option>
						<#list asList as sort >
							<option value="${sort.id}">${sort.name}</option>
						</#list>
						<option id="opt_addSort" value="0">添加文章分类</option>
					</select>
					<div class="newArticleSortA">
						<input type="hidden" id="msg" value="${msg!''}"/>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-10">
					<button type="submit" class="btn btn-primary"> 发表文章 </button>
					<!--  隐藏掉测试部分
					<a onclick="getContent();">得到ueditor中的html文本</a>
					<a onclick="getContentTxt();">得到ueditor中的纯文本</a>
					-->
				</div>
			</div>
		</form>
	</div>
</div>
<#include "../public/copyright.html"/>
<!-- 新建文章分类的jQuery.layer层 -->
<div id="div_addSort" style="display: none;">
	<#include "addArticleSort.html"/>
</div>
<script type="text/javascript">
	$(function(){
		$("#inputSort").change(function(){
			var val = $(this).val();
			if(val == 0){
				$.layer({
				    type: 1,
				    shade: [0.5, '#000'],
				    area: ['300', '120'],
				    title: '新建文章分类',
				    border: [5, 0.5, '#fff'],
				    page: {dom : '#div_addSort'}
				});
				$("#pleaseSort").prop("selected",true);
			}
		});
		
		alertMsg('msg');
	});
	/*
	验证表单
	*/
	function validateForm(){
		//验证标题
		var _msg = "";
		var _title = $("#inputTitle").val();
		if(!isEmptyString(_title)){
			if(_title.length > 16){
				_msg += "博客标题不能超过16个字符\n";
			}
		}else{
			_msg += "博客标题不能为空\n";
		}
		//验证博客内容
		if(!hasContent()){
			_msg += "内容不能为空\n";
		}
		//验证是否选择了文章分类
		var _sort = $("#inputSort").val();
		if(_sort == 0){
			_msg += "您还没有选择文章分类\n";
		}
		if(_msg.length > 0){
			alert(_msg);
			return false;
		}
		return true;
	}
</script>
